<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <span class="span-one">说明:目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit" class="newly-added" @click="$router.push('new')">新增试题</el-button>
        <div class="cont">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="学科">
                    <el-select v-model="form.subjectID" placeholder="请选择">
                      <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.subjectName"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="二级目录">
                    <el-select v-model="form.catalogID" placeholder="请选择">
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="标签">
                    <el-select v-model="form.tags" placeholder="请选择">
                      <el-option value=""></el-option>

                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <strong style="font-size:14px; margin-left:26px">关键字</strong>
                <el-input v-model="form.keyWord" placeholder="根据题干搜索" style="margin-left:10px"></el-input>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="试题类型">
                    <el-select v-model="form.questionType" placeholder="请选择">
                      <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="难度">
                    <el-select v-model="form.difficulty" placeholder="请选择">
                      <el-option v-for="item in difficultyList" :key="item.value" :label="item.label" :value="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="方向">
                    <el-select v-model="form.direction" placeholder="请选择">
                      <el-option v-for="(item, index) in directionList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="录入人">
                    <el-select v-model="form.creatorID" placeholder="请选择">
                      <el-option v-for="item in inputerList" :key="item.id" :label="item.username" :value="item.username"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <strong style="font-size:14px; margin-left:13px">题目备注</strong>
                <el-input v-model="form.remarks" placeholder="根据题干搜索" style="margin-left:10px"></el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <strong style="font-size:14px;margin-left:13px">企业简称</strong>
                <el-input v-model="form.shortName" placeholder="根据题干搜索" style="margin-left:10px"></el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form ref="form" :model="form" label-width="80px;position:absolute">
                  <el-form-item label="城市" style="margin-left:40px">
                    <el-select v-model="form.provinces" placeholder="请选择" style="width:42%; ">
                      <el-option v-for="(item, index) in townList" :key="index" :label="item" :value="item" @click.native="getPname(item)"></el-option>
                    </el-select>
                    <el-select v-model="form.city" placeholder="请选择" style="width:42%;">
                      <el-option v-for="(item, index) in provincesList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple search" style="margin-right:10px">
                <span>
                  <el-button @click="handleClear">清除</el-button>
                </span>
                <span class="span-mia">
                  <el-button type="primary" @click="handleSearch">搜索</el-button>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="minis">
          <el-button>全部</el-button>
          <el-button>待审核</el-button>
          <el-button>已审核</el-button>
          <el-button>已拒绝</el-button>
        </div>
        <el-alert :title="`数据共 条`" type="info" show-icon style="margin-bottom: 10px">
        </el-alert>
        <!-- 渲染后台数据 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="180">
          </el-table-column>
          <el-table-column prop="subjectID" label="学科" width="180">
          </el-table-column>
          <el-table-column prop="catalogID" label="目录" width="180">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="180">
          </el-table-column>
          <el-table-column prop="question" label="题干" width="180">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="180">
          </el-table-column>
          <el-table-column prop="creatorID" label="录入人" width="180">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="180">
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="180">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="180">
          </el-table-column>
          <el-table-column label="发布状态" width="180">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="220" float='left'>
            <template class="list-operation">
              <el-button type="text" size="small">预览</el-button>
              <el-button type="text" size="small">审核</el-button>
              <el-button type="text" size="small">修改</el-button>
              <el-button type="text" size="small">上架</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
          <!-- 分页 -->
        </el-table>
        <el-pagination background :current-page="form.page" :page-size="form.pagesize" :page-sizes="[2,3,5,10]" layout="->,prev, pager, next,sizes,jumper" :total="count" @size-change='changeSize' @current-change='changePage'>
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as baseList, choice } from '../../api/hmmm/questions'// 获取数据
import { provinces, citys } from '@/api/hmmm/citys'// 获取城市
import { direction, difficulty, questionType } from '@/api/hmmm/constants'// 获取方向
import { list as subList } from '@/api/hmmm/subjects'// 获取学科
import { simple } from '@/api/base/users'// 获取录入者
export default {
  name: 'questions-choice',
  data () {
    return {
      // 题目列表
      questionList: [],
      // 数据数量
      count: 0,
      pname: '',
      // 市级城市
      townList: provinces(),
      // 省级城市
      provincesList: [],
      // 录入者列表
      inputerList: [],
      // 难度
      difficultyList: difficulty,
      // 题型列表
      questionTypeList: questionType,
      // 方向列表
      directionList: direction,
      // 学科列表
      subjectList: [],
      // 选择的题目
      list: [],
      total: 0,
      form: {
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        tags: null, // 标签
        direction: null, // 方向
        number: null, // 编号
        subjectID: null, // 学科
        catalogID: null, // 目录
        keyWord: null, // 关键字
        shortName: null, // 企业简称
        city: null, // 城市
        questionType: null, // 题型
        question: null, // 题干
        addDate: null, // 录入时间
        difficulty: null, // 难度
        creatorID: null, // 录入人
        chkState: null, // 筛选状态
        chkRemarks: null, // 审核意见
        chkUser: null // 审核人
      }

    }
  },
  methods: {
    async selected () {
      const res = await choice()
      this.list = res.data.items
      this.total = res.data.counts
      // console.log(res)
    },
    // whole () {

    // },
    // toBeReviewed () {

    // },
    // reviewed () {

    // },
    // rejected () {

    // }
    // async preview (row) {
    //   const res = await questionsPreview()

    // }
    // 每页条数变化
    changeSize (size) {
      console.log(size)
      this.form.page = 1
      this.form.pagesize = size
      this.getBaseList()
    },
    // 页码变化
    changePage (page) {
      console.log(page)
      this.form.page = page
      this.getBaseList()
    },
    getPname (item) {
      this.pname = item
      this.provincesList = citys(this.pname)
    },
    handleQuery () {
      this.getBaseList()
    },
    // 清空表单
    handleClear () {
      this.form = this.$options.data().form
    },
    handleSearch () {
      this.getBaseList()
    },
    async getBaseList () {
      const resp = await baseList({ ...this.form })
      if (resp.status === 200) {
        this.count = resp.data.counts
        this.questionList = resp.data.items
      }
    }
  },
  async created () {
    // 获取学科
    const subResp = await subList()
    this.subjectList = subResp.data.items
    // 获取录入者
    const getInputer = await simple()
    this.inputerList = getInputer.data
    // 获取数据
    this.getBaseList()
    this.selected()
  },
  watch: {
    pname (newVal, oldVal) {
      if (newVal) {
        this.form.city = ''
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.search {
  float: right;
}
.span-one {
  font-size: 12px;
  color: rgb(250, 195, 195);
}
.newly-added {
  float: right;
}
.cont {
  margin-top: 40px;
}
.minis {
  margin-top: 15px;
  height: 36px;
  border-bottom: 0.5px solid #e4e7ed;
}
.minis .el-button {
  float: left !important;
  margin: 0;
  border-radius: 0px;
}
</style>
<style scoped>
.app-container .el-button {
  font-size: 14px;
}
.el-input {
  width: 80%;
  height: 32px;
}
.el-col .el-button {
  margin-right: 10px;
}
.el-form-item__content .el-select {
  width: 100%;
}
</style>
